<!DOCTYPE html>
<html lang="zh"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间轴</title>
	<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
</head>
<body class="gray-bg">
    <div class="row animated fadeInRight">
        <div class="ibox float-e-margins">
<!--            <div class="text-center float-e-margins p-md">-->
<!--                <span>打开/关闭颜色/背景或方向版本: </span>-->
<!--                <a href="#" class="btn btn-xs btn-primary" id="lightVersion">轻型版本 </a>-->
<!--                <a href="#" class="btn btn-xs btn-primary" id="darkVersion">黑色版本 </a>-->
<!--            </div>-->
            <div id="ibox-content">
                 <div id="vertical-timeline" class="vertical-container light-timeline" th:each="u : ${approvalRecordList}">
                     <div class="vertical-timeline-block">
                         <div class="vertical-timeline-icon navy-bg">
                             <i th:if="${u.approvalType} eq 0" class="fa fa fa-file-text"></i>
                             <i th:if="${u.approvalType} eq 1" class="fa fa fa-user-circle"></i>
                         </div>

                         <div class="vertical-timeline-content">
                             <h2 th:if="${u.approvalStatus} eq 2" style="color: #d82222">[[*{u.approvalTitle}]]</h2>
                             <h2 th:if="${u.approvalStatus} ne 2" style="color: #1ab394">[[*{u.approvalTitle}]]</h2>

                             <p th:if="${u.approvalType} ne 1" th:text="${u.approvalReason}"></p>
                             <p th:if="${u.approvalType} eq 1" th:text="'审核人:'+${#strings.arraySplit(u.approvalReason,'|')[1]}"></p>
                             <span class="vertical-date">
                                 <span th:if="${u.approvalType} ne 1" th:text="${u.approvalUserName}"></span> <br>
                                 <span th:if="${u.approvalType} eq 1" th:text="'送审人:'+${u.approvalUserName}"></span> <br>
                               <small th:text="${#dates.format(u.approvalTime,'yyyy-MM-dd HH:mm:ss')}"></small>
                              </span>
                         </div>
                     </div>
                 </div>
             </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        function action(param){
            return "hello world!";
        }
        $(document).ready(function(){
            $('#lightVersion').click(function(event) {
                event.preventDefault()
                $('#ibox-content').removeClass('ibox-content');
                $('#vertical-timeline').removeClass('dark-timeline');
                $('#vertical-timeline').addClass('light-timeline');
            });
            $('#darkVersion').click(function(event) {
                event.preventDefault()
                $('#ibox-content').addClass('ibox-content');
                $('#vertical-timeline').removeClass('light-timeline');
                $('#vertical-timeline').addClass('dark-timeline');
            });
        });
    </script>
</body>
</html>
